<template>
  <view class="wh_750 bg_FFFFFF flex flex-column align-center pageHeight">
    <s-header-title ref="headerTitle" isDisplayBack title="加入亲友的家庭" is-fixed background="#F8F8F8"
                  @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <view class="hW_20"></view>
    <!--    <view class="joinFamily_search wh_702 hW_80">-->
    <!--      <uni-search-bar v-model="page.familyNameValue"-->
    <!--                      bgColor="#FFFFFF"-->
    <!--                      placeholder="请输入亲友的家庭号"-->
    <!--                      @confirm="confirm"-->
    <!--      ></uni-search-bar>-->
    <!--    </view>-->
    <view class="inputName flex align-center justify-between">
      <input v-model="page.familyNameValue" placeholder="请输入亲友的家庭号" placeholder-class="inputName_placeholder"
             :focus="familyNameFocus" @input="nameInput" confirm-type="search" @confirm="confirm"></input>
      <view class="fs_28 color_292929 fw_500"
            style="white-space: nowrap"
            @click.stop="confirm"
      >
        搜索
      </view>
    </view>
    <view class="familyManagement wh_702 flex align-center justify-between mt_25 bg_FF7D57"
          v-for="(item,index) in family.list"
          :key="index"
    >
      <view class="mt_20 mb_20 ml_20">
        <view class="fw_500 fs_36 color_FFFFFF">{{ item.name }}</view>
        <view class="fw_500 fs_26 color_FFFFFF mt_5">家庭号: {{ item.family_id }}</view>
        <view class="fw_500 fs_26 color_FFFFFF mt_5">发起人: {{ item.create_user_name }}</view>
        <view class="flex align-center mt_5">
          <image-avater width="44"
                        height="44"
                        :src="member.avatar"
                        v-for="(member,key) in item.member_limit"
                        :key="key"
          ></image-avater>
        </view>
      </view>
      <view class="joinButton wh_140 hW_48 bg_FF4206 flex align-center justify-center fs_24 fw_500 color_FFFFFF mr_20"
            @click.stop="applyToJoin(item)"
      >
        {{ item.is_add == 0 ? '申请加入' : item.is_add == 1 ? '已申请' : '已加入' }}
      </view>
    </view>
    <view class="hW_100"></view>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/familyPage/components/headerTitle.vue';
  import { computed, onMounted, reactive, ref } from 'vue';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import sheep from '@/sheep';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';

  const page = reactive({
    headerHeight: 0,
    familyNameValue: '',
  });

  const family = reactive({
    list: [],
  });
  const familyNameFocus = ref(false);

  const isLogin = computed(() => sheep.$store('user').isLogin);

  onMounted(() => {
    familyNameFocus.value = true;
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function confirm() {
    const { data } = await sheep.$api.family.searchFamily({
      family_id: page.familyNameValue,
    });
    family.list.push(data);
  }

  // 申请加入家庭
  async function applyToJoin(item) {
    if (item.is_add != 0) {
      return;
    }
    const { data } = await sheep.$api.family.applyFamily({
      family_id: item.id,
    });
    uni.navigateBack();
  }
</script>


<style scoped lang="scss">
  .joinFamily_search {
    border-radius: 50rpx;
  }

  .familyManagement {
    border-radius: 20rpx;
  }

  .joinButton {
    border-radius: 20rpx;
  }

  .inputName {
    width: 702rpx;
    height: 80rpx;

    input {
      width: 620rpx;
      height: 80rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
      text-align: center;
      background: #F8F8F8;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }
  }

  .inputName_placeholder {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #9F9F9F;
    text-align: center;
  }
</style>
